<template>
  <view class="page-container">
    <!-- 团队基本信息卡片 -->
    <view class="team-header-card">
      <text class="team-name">{{ teamInfo.name }}</text>
      <view class="team-tags">
        <text v-for="(tag, index) in teamInfo.tags" :key="index" class="tag">{{ tag }}</text>
      </view>
      <view class="institution-info">
        <uni-icons type="location-filled" size="14" color="#888"></uni-icons>
        <text class="institution-name">{{ teamInfo.institution }}</text>
      </view>
      <text class="team-description">{{ teamInfo.description }}</text>
    </view>

    <!-- 团队核心成员 -->
    <view class="section-container">
      <view class="section-title">核心成员</view>
      <scroll-view class="doctor-scroll-view" scroll-x="true" show-scrollbar="false">
        <view class="doctor-list">
          <view class="doctor-card" v-for="doctor in doctors" :key="doctor.id" @click="navigateToDoctor(doctor.id)">
            <image class="doctor-avatar" :src="doctor.avatar" mode="aspectFill"></image>
            <text class="doctor-name">{{ doctor.name }}</text>
            <text class="doctor-title">{{ doctor.title }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 签约服务包 -->
    <view class="section-container">
      <view class="section-title">签约服务包</view>
      <view class="package-list">
        <view class="package-card" v-for="pkg in servicePackages" :key="pkg.id" @click="navigateToServicePackage(pkg.id)">
          <image class="package-icon" :src="pkg.icon" mode="aspectFit"></image>
          <view class="package-info">
            <text class="package-name">{{ pkg.name }}</text>
            <view class="package-tags">
              <text v-for="(tag, index) in pkg.tags" :key="index" class="package-tag">{{ tag }}</text>
            </view>
          </view>
          <view class="package-price-section">
            <text class="package-price">{{ pkg.price }}</text>
            <uni-icons type="right" size="16" color="#bbb"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="footer-bar">
      <button class="signup-button" @click="handleSignUp">选择此团队签约</button>
    </view>

  </view>
</template>

<script>
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  name: "team-detail",
  components: {UniIcons},
  data() {
    return {
      // --- Mock Data: 这里是模拟数据，您之后需要从API接口获取 ---
      teamInfo: {
        id: 1,
        name: '王天戈健康团队',
        institution: '翡翠郡社区卫生服务站',
        tags: ['高血压管理', '糖尿病护理', '儿童保健'],
        description: '我们致力于为您和您的家人提供全面、连续、个性化的健康管理服务，成为您信赖的家庭健康守护者。'
      },
      doctors: [
        { id: 101, name: '王小倩', title: '全科护士', avatar: 'https://placehold.co/100x100/a2d2ff/333?text=王' },
        { id: 102, name: '李明', title: '全科医生', avatar: 'https://placehold.co/100x100/bde0fe/333?text=李' },
        { id: 103, name: '张伟', title: '康复理疗师', avatar: 'https://placehold.co/100x100/ffafcc/333?text=张' },
        { id: 104, name: '刘芳', title: '公共卫生医师', avatar: 'https://placehold.co/100x100/ffc8dd/333?text=刘' }
      ],
      servicePackages: [
        { id: 201, name: '老年人基础服务包', price: '120/年', tags: ['慢病管理', '常规体检'], icon: 'https://img.icons8.com/fluency/96/old-man--v1.png' },
        { id: 202, name: '儿童健康成长服务包', price: '180/年', tags: ['生长发育监测', '疫苗接种提醒'], icon: 'https://img.icons8.com/fluency/96/baby-feet.png' },
        { id: 203, name: '高血压专项服务包', price: '200/年', tags: ['定期随访', '用药指导'], icon: 'https://img.icons8.com/fluency/96/heart-with-pulse.png' }
      ]
      // --- Mock Data End ---
    };
  },
  methods: {
    // 跳转到医生主页
    navigateToDoctor(doctorId) {
      console.log('Navigate to doctor ID:', doctorId);
      // uni.navigateTo({ url: `/pages/doctor/detail?id=${doctorId}` });
      uni.showToast({ title: `跳转到ID为 ${doctorId} 的医生主页`, icon: 'none' });
    },
    // 跳转到服务包详情页
    navigateToServicePackage(packageId) {
      console.log('Navigate to service package ID:', packageId);
      // uni.navigateTo({ url: `/pages/service/package-detail?id=${packageId}` });
      uni.showToast({ title: `查看ID为 ${packageId} 的服务包详情`, icon: 'none' });
    },
    // 处理签约逻辑
    handleSignUp() {
      console.log('Handle sign up with team ID:', this.teamInfo.id);
      // 跳转到签约申请页，并带上团队ID
      // uni.navigateTo({ url: `/pages/sign/apply?teamId=${this.teamInfo.id}` });
      uni.showToast({ title: `与团队 ${this.teamInfo.name} 进行签约`, icon: 'none' });
    }
  }
}
</script>

<style scoped>
/* 全局页面样式 */
.page-container {
  background-color: #f5f8ff;
  padding: 24rpx 30rpx;
  padding-bottom: 180rpx; /* 为底部按钮留出空间 */
}

/* 团队信息卡片 */
.team-header-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.team-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}
.team-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16rpx;
}
.tag {
  background-color: #e0f0ff;
  color: #007aff;
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
  margin-right: 12rpx;
  margin-bottom: 12rpx;
}
.institution-info {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}
.institution-name {
  font-size: 26rpx;
  color: #888;
  margin-left: 8rpx;
}
.team-description {
  font-size: 26rpx;
  color: #666;
  margin-top: 20rpx;
  line-height: 1.6;
}

/* 通用区块样式 */
.section-container {
  margin-bottom: 30rpx;
}
.section-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
}

/* 医生横向滚动列表 */
.doctor-scroll-view {
  width: 100%;
  white-space: nowrap;
}
.doctor-list {
  display: flex;
  gap: 24rpx;
}
.doctor-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  width: 200rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.doctor-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-bottom: 16rpx;
}
.doctor-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.doctor-title {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}

/* 服务包列表 */
.package-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.package-card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.package-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 24rpx;
}
.package-info {
  flex: 1;
}
.package-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}
.package-tags {
  display: flex;
  margin-top: 10rpx;
}
.package-tag {
  font-size: 22rpx;
  color: #888;
  background-color: #f5f5f5;
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
  margin-right: 10rpx;
}
.package-price-section {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.package-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff5733;
}

/* 底部操作栏 */
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); /* 适配iPhone X等机型 */
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #eee;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.03);
}
.signup-button {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #007aff;
  color: white;
  font-size: 32rpx;
  border-radius: 48rpx;
  border: none;
}
.signup-button:active {
  background-color: #0056b3;
}
</style>
